<template>
	<view class="my-page">
		<u-navbar leftIconColor="#000" :autoBack="true" :placeholder="true" bgColor="rgba(255,255,255,0.0)">
			<view slot="center" class="nav-title">
				总货款
			</view>
		</u-navbar>
		<view class="head-box">
			<view class="head-top">
				<view class="head-text">
					总货款
				</view>
				<view class="head-num">
					{{userinfo.all_assets}}
				</view>
			</view>
		</view>
		<view v-if="assetslist.length > 0">
			<view class="item" v-for="(item,index) in assetslist" :key="index">
				<view class="item-top">
					<image :src="item.logo" mode=""></image>
					<view class="item-right">
						<view class="item-title">
							{{item.name}}
						</view>
						<view class="time">
							<view class="time-text">
								<view class="time-left">开始时间：</view>
								<view class="time-right">{{item.create_time}}</view>
							</view>
							<view class="time-text">
								<view class="time-left">结束时间：</view>
								<view class="time-right">{{item.end_time}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="item-cont">
					<view class="info-item">
						<view class="info-text">
							利润(CNY)
						</view>
						<view class="info-num info-title">
							{{item.reward}}
						</view>

					</view>
					<view class="info-item">
						<view class="info-text">
							收益率/日
						</view>
						<view class="info-num">
							{{item.rate}}
						</view>

					</view>
					<view class="info-item">
						<view class="info-text">
							价值
						</view>
						<view class="info-num">
							{{item.price}}
						</view>

					</view>
				</view>
				<view class="surplus">
					<view class="surplus-btn complete"  v-if="item.status == 1" @click="showopen(item.id)">
						复利续期
					</view>
				</view>
				<view class="tisp">{{ item.status | fixStatus }}</view>
			</view>
			<u-loadmore :status="status" />
		</view>
		<u-empty v-else mode="list" icon="../../../static/home/none.png" :marginTop="100" text="订单列表为空">
		</u-empty>
		<u-popup :show="show" @close="close" mode="center" round="20">
			<view class="pop">
				<view class="pop-title">
					续期产品
				</view>
				<view class="select">
					<view>选择产品</view>
					<view class="select-right" @click="isSelect = true">
						<view class="text">{{Select}}</view>
						<u-icon name="arrow-down" color="#666666" size="18"></u-icon>
					</view>
				</view>
				<view class="pop-text">
					奖励代金券
				</view>
				<view class="pop-img">
					<view class="amount">
						<text>￥</text>{{amount}}
					</view>
				</view>
				<view class="tisp">
					复利续期介绍:用户点击复利续期即可增加一个周期的收益同时延长一个周期出售到期自动挂卖
				</view>
				<view class="pop-btn">
					<u-button size="large" color="#FF686B" @click="goxuyue" shape="circle" type="primary"
						text="立刻续约"></u-button>
				</view>
			</view>
		</u-popup>
		<u-picker :show="isSelect" @confirm="confirm" keyName="label" :columns="columns"
			@cancel="isSelect = false"></u-picker>
	</view>
</template>

<script>
	export default {
		filters: {
			fixStatus(status) {
				return status === 1 ? '增值中' : status === 2 ? '待转让' : status === 3 ? '转让中' : ''
			}
		},
		data() {
			return {
				assetslist: [],
				page: 1,
				userinfo: {},
				show: false,
				isSelect: false,
				Select: '',
				columns: [],
				period: '',
				product_id: '',
				status: 'loadmore',
				amount: ''
			}
		},
		onLoad() {
			this.postassets()
			this.postinfo()
		},
		onReachBottom() {
			this.page++
			this.status = 'loading';
			this.postassets()
		},
		methods: {
			showopen(e) {
				this.product_id = e
				this.show = true
			},
			goxuyue() {
				uni.showLoading({
					mask: true
				})
				let params = {
					period: this.period,
					product_id: this.product_id
				}
				this.$Request({
					method: 'POST',
					url: '/api/mutualaidorder/renewProduct',
					data: params,
					ismsg: true,
				}).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						this.show = false
						this.page = 1
						this.postassets()
					}
				})
			},
			confirm(e) {
				console.log(e.value[0].label)
				this.Select = e.value[0].label
				this.period = e.value[0].period
				this.amount = e.value[0].amount
				this.isSelect = false

			},
			postinfo() {
				this.$Request({
					method: 'POST',
					url: '/api/mutualaidorder/getRenewalOptions',
					data: {},
					ismsg: false,
				}).then(res => {
					if (res.code == 1) {
						this.columns.push(res.data)
						this.Select = res.data[0].label
						this.period = res.data[0].period
						this.amount = res.data[0].amount
					}
				})
			},
			close() {
				this.show = false
			},
			postassets() {
				let params = {
					page: this.page,
					status: 212
				}
				this.$Request({
					method: 'POST',
					url: '/api/mutualaidorder/assetsIndex',
					data: params,
					ismsg: false,
				}).then(res => {
					if (res.code == 1) {
						this.userinfo = res.data.user
						if (res.data.list.length < 10) {
							this.status = 'nomore';
						}
						if (this.page == 1) {
							this.assetslist = res.data.list
						} else {
							this.assetslist = [...this.assetslist, ...res.data.list]
						}
					}
				})

			}
		}
	}
</script>

<style>
	page {
		background-color: #fafafa;
	}
</style>
<style lang="scss" scoped>
	.my-page {
		background-image: url('../../../static/home/home-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 500rpx;
		min-height: 80vh;
		padding: 30rpx;

		.nav-title {
			color: #000;
		}

		.pop {
			width: 600rpx;
			padding: 30rpx;

			.pop-title {
				text-align: center;
				font-size: 32rpx;
				font-weight: bold;
			}

			.select {
				margin-top: 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				font-weight: bold;

				.select-right {
					width: 70%;
					padding: 15rpx 20rpx;
					background-color: #F7F5F6;
					border-radius: 40rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-weight: normal;
					color: #999999;

					.text {
						white-space: nowrap;
						/* 防止文本换行 */
						overflow: hidden;
						/* 隐藏溢出的文本 */
						text-overflow: ellipsis;
					}
				}
			}

			.pop-text {
				margin-top: 30rpx;
				font-size: 28rpx;
				color: #000;
				font-weight: bold;
			}

			.pop-img {
				width: 100%;
				height: 210rpx;
				margin-top: 30rpx;
				background-image: url('../../../static/home/pop-img.png');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				text-align: center;
				font-size: 70rpx;
				color: #FF4E4E;
				position: relative;

				text {
					font-size: 40rpx;
				}

				.amount {
					position: absolute;
					left: 0;
					right: 0;
					margin: auto;
					bottom: 16%;
					padding-right: 20rpx;
				}
			}

			.tisp {
				margin-top: 30rpx;
				font-size: 26rpx;
				color: red;
			}

			.pop-btn {
				margin-top: 30rpx;
			}
		}

		.head-box {
			background: linear-gradient(to left, #FD5674, #FF6448);
			border-radius: 30rpx;
			padding: 30rpx;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.head-text {
				font-size: 24rpx;
			}

			.head-num {
				font-size: 48rpx;
				font-weight: bold;
			}
		}

		.item {
			padding: 30rpx;
			border-radius: 30rpx;
			background-color: #fff;
			box-shadow: 0rpx 3rpx 32rpx 1rpx rgba(0, 0, 0, 0.08);
			margin-top: 30rpx;
			position: relative;

			.tisp {
				position: absolute;
				right: 0;
				top: 0;
				padding: 15rpx 20rpx;
				background: linear-gradient(to left, #FD5674, #FF6448);
				color: #fff;
				border-bottom-left-radius: 20px;
				font-size: 26rpx;
			}

			.item-cont {
				display: flex;
				justify-content: space-between;
				text-align: center;
				margin-top: 20rpx;

				.info-item {
					font-size: 28rpx;

					.info-num {
						color: #000;
						font-weight: bold;
						margin-top: 5rpx;
					}

					.info-text {
						color: #999;
						margin-top: 5rpx;
					}

					.info-title {
						color: #FD586C;
					}
				}
			}
			.surplus {
				margin-top: 20rpx;
				font-size: 28rpx;
				color: #999999;
			
				.surplus-btn {
					text-align: center;
					padding: 20rpx 30rpx;
					border-radius: 30rpx;
					font-size: 26rpx;
					color: #fff;
				}
			
				.in-btn {
					background: #FFF6EF;
					color: #A26D47;
				}
			
				.complete {
					background: #EBF7F0;
					color: #379760;
				}
			
				.appeal {
					background-color: #FFECEF;
					color: #FF2538;
				}
			}
			.item-top {
				display: flex;
				align-items: center;
				justify-content: space-between;

				image {
					width: 130rpx;
					height: 130rpx;
				}

				.item-right {
					width: 75%;

					.item-title {
						font-size: 34rpx;
						font-weight: bold;
						color: #000;
					}

					.time {
						margin-top: 10rpx;

						.time-text {
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-top: 5rpx;
							font-size: 26rpx;

							.time-left {
								color: #8F8F8F;
							}

							.time-right {
								color: #090B08;
							}
						}
					}


				}
			}
		}
	}
</style>